import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Space, Card, Form, Input, Button } from 'antd';
import { useEffect, useState } from 'react';

const Index = () => {
  // 拿到表单实例
  const [form] = Form.useForm();

  // forceUpdate用于做强制更新
  // const [, forceUpdate] = useState({});

  // To disable submit button at the beginning.
  // useEffect(() => {
  //   forceUpdate({});
  // }, []);

  // const onFinish = (values: any) => {
  //   console.log('Finish:', values);
  // };

  const fn = () => {
    // getFieldsValue方法可以拿到整个表单填的内容
    // console.log(form.getFieldsValue());

    // getFieldsValue方法可以拿到表单其中某个字段填的内容
    // console.log(form.getFieldValue('username'));

    // resetFields方法是重置整个表单
    // form.resetFields();

    // getFieldsError方法可以获取到表单验证的错误(必须要操作过的)
    // console.log(form.getFieldsError());

    // isFieldsTouched方式表示每个表单控件是否被操作过
    // console.log(form.isFieldsTouched(true));

    // if (
    //   form.isFieldsTouched(true) &&
    //   !form.getFieldsError().filter(({ errors }) => errors.length).length
    // ) {
    //   console.log(form.getFieldsValue());
    // }

    // validateFields方法验证表单是否通过
    // form
    //   .validateFields()
    //   .then((res) => {
    //     console.log(1, res);
    //   })
    //   .catch((errinfo) => {
    //     console.log(2, errinfo);
    //   });

    // scrollToField方法用于直接滚动到报错字段

    // setFieldsValue方法用于设置表单里面的值
    form.setFieldsValue({
      username: 'zhangsan',
    });
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="登录行内表单">
        <Form
          form={form}
          name="horizontal_login"
          // 表单时横着排的
          layout="inline"
          // 是点击submit按钮的时候会触发的
          // onFinish={onFinish}
        >
          {/* 表单里面的每一项都要用Item组件套住 */}
          <Form.Item
            // name是里面的表单控件要绑定的对象的字段
            name="username"
            // rules是用来做表单验证的
            rules={[
              { required: true, message: 'Please input your username!' },
              // {
              //   max: 10,
              //   message: '最大长度为10',
              // },
              // {
              //   pattern: /^1[3456789]\d{9}$/,
              //   message: '请输入正确的手机号',
              // },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          {/* <Form.Item>
            <Button type="primary" htmlType="submit">
              Log in
            </Button>
          </Form.Item> */}
        </Form>

        <Button onClick={fn}>Log in</Button>
      </Card>
    </Space>
  );
};

export default Index;
